<template>
  <div class="cart">
    <!-- 顶部登录按钮 -->
    <div class="cart-login line-bottom" v-if="false">
      登录可同步购物车内商品
      <!-- <a href="javascript:;" class="line-all">登录</a> -->
      <router-link to="./Login" tag="a" class="line-all">登录</router-link>
    </div>
    <div class="toppad"></div>

    <!-- 购物车商品列表 -->
    <template v-for="items in html">
      <div class="goods goodsTop" style v-for="item in items.Commoditys" :key="item.CartId">
        <div class="group line-bottom">
          <div class="saleGroup line-top">
            <!---->
            <div class="one line-bottom">
              <div class="check">
                <van-checkbox
                  v-model="item.IsSelected"
                  checked-color="#07c160"
                  @click="check(item.CartId)"
                ></van-checkbox>
              </div>
              <div class="img">
                <img :src="item.SmallPic" />
              </div>
              <div class="text">
                <h2 class="elli2">{{item.CommodityName}}</h2>
                <div class="tag">
                  <!---->
                </div>
                <p>
                  <strong class="red">
                    ¥
                    <b>{{item.SellPrice}}</b>
                  </strong>
                  <!---->
                </p>
              </div>
              <div class="del" @click="overlay(item.CartId)">
                <i></i>
              </div>
              <div class="limit red"></div>
              <van-stepper
                v-model="item.CommodityAmount"
                integer
                disable-input
                input-width="2rem"
                button-size="1.375rem"
                :max="item.MaxLimitCount"
                @plus="editcard(item.CartId,1)"
                @minus="editcard(item.CartId,2)"
              />
              <!-- 遮罩 -->
              <van-overlay :show="show" z-index="99999">
                <div class="wrapper" @click.stop>
                  <div class="popup-hint">
                    <p class="hint-text">您确定删除吗？</p>
                    <div class="btnpop1 clear">
                      <a href="javascript:;" class="btnone" @click="deleteCart">确定</a>
                      <a href="javascript:;" class="btntwo" @click="show = false">取消</a>
                    </div>
                  </div>
                </div>
              </van-overlay>
            </div>
            <!---->
          </div>
        </div>
      </div>
    </template>
    <!-- 总价 -->
    <div class="cart-total line-top">
      <div class="check">
        <van-checkbox v-model="datas.IsAllSelect" checked-color="#07c160" @click="allcheck"></van-checkbox>
      </div>
      <div class="text">
        <p>
          合计(不含运费)：
          <b class="red">￥{{datas.SumAmount}}</b>
        </p>
        <span>已优惠: ￥{{datas.DiscountAmount}}</span>
      </div>
      <div class="btn">
        <a href="javascript:;" class>去结算({{datas.Num}})</a>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <like />
    <!-- 底部导航栏 -->
    <Nev />
  </div>
</template>
<script>
import like from "@/components/youlike.vue";
import Nev from "@/components/Nev.vue";
import getapi from "@/api/ajax";
export default {
  data() {
    return {
      value: "",
      html: "",
      show: false,
      cartid: "",
      datas: ""
    };
  },
  components: {
    Nev,
    like
  },
  methods: {
    //遮罩
    overlay(cartid) {
      this.show = true;
      this.cartid = cartid;
    },
    //删除商品
    async deleteCart() {
      let id = this.cartid;
      try {
        let body = {
          DeleteCarts: [{ BusinessId: id, CartBusinessType: 1 }]
        };
        await getapi.getdata("shopcart/CartOperation/DeleteCart", body);
        this.getdata();
      } catch (err) {
        console.log(err);
      }
      this.show = false;
    },
    //复选框状态
    async check(x) {
      try {
        let body = {
          BusinessId: x,
          CartBusinessType: 1
        };
        await getapi.getdata("shopcart/CartOperation/CheckSingle", body);
      } catch (err) {
        console.log(err);
      }
      this.getdata();
    },
    //全选
    async allcheck() {
      try {
        let body = {
          CartBusinessType: 2
        };
        if (this.datas.IsAllSelect) {
          body.CartBusinessType = 1;
        } else {
          body.CartBusinessType = 2;
        }
        await getapi.getdata("shopcart/CartOperation/CheckAll", body);
      } catch (err) {
        console.log(err);
      }
      this.getdata();
    },
    //修改数量
    async editcard(x, y) {
      try {
        let body = {
          EditCarts: [
            { BusinessId: x, CartBusinessType: 1, CartOperationType: y, Num: 1 }
          ]
        };
        let n = await getapi.getdata("shopcart/CartOperation/EditCart", body);
        this.getdata();
        if (n.data.Message) {
          //库存不足
          this.$toast(n.data.Message);
        }
      } catch (err) {
        console.log(err);
      }
    },
    //获取数据
    async getdata() {
      try {
        let body = { CouponId: "" };
        let n = await getapi.getdata("shopcart/CartInfo/GetCartInfo", body);
        this.html = n.data.Data.ShopCartGroups;
        this.datas = n.data.Data;
        this.$store.dispatch("cartnum");
      } catch (err) {
        console.log(err);
      }
    }
  },
  created() {
    this.getdata();
  }
};
</script>
<style lang="scss">
.cart {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f4f4f4;

  //总价
  .cart-total {
    position: fixed;
    left: 0;
    bottom: 4.17rem;
    width: 100%;
    height: 3.2rem;
    padding: 0 7.98rem 0 0;
    box-sizing: border-box;
    background: #fff;
    z-index: 9999;
    .check {
      position: absolute;
      top: 0;
      left: 0;
      width: 4.2rem;
      height: 1.08rem;
      padding: 1.06rem 0 1.06rem 0.72rem;
      font-size: 0.76rem;
    }
    .text {
      padding: 0.4rem 0;
      line-height: 1.2rem;
      font-size: 11px;
      text-align: right;
      .red {
        color: #fb3d3d;
        font-size: 0.92rem;
      }
      span {
        color: #999;
      }
    }
    .btn {
      position: absolute;
      right: 0;
      top: 0;
      width: 7.2rem;
      height: 3.2rem;
      a {
        display: block;
        width: 7.2rem;
        height: 3.2rem;
        background: #fb3d3d;
        line-height: 3.2rem;
        font-size: 1rem;
        color: #fff;
        text-align: center;
      }
    }
  }

  //遮罩
  .wrapper {
    .popup-hint {
      position: absolute;
      left: 50%;
      top: 40%;
      width: 22rem;
      height: auto;
      margin: -4rem 0 0 -11rem;
      background: #fff;
      border-radius: 0.4rem;
      text-align: center;
      padding: 2.3rem 1.5rem 1.64rem;
      box-sizing: border-box;
      .hint-text {
        font-size: 1.08rem;
        padding: 0.2rem 0 2.36rem;
        color: #333;
      }
      .btnpop1 {
        a {
          border-radius: 3px;
          display: inline-block;
          float: left;
          width: 8.74rem;
          height: 2.4rem;
          line-height: 2.4rem;
          color: gray;
          border: 1px solid gray;
          font-size: 1rem;
        }
        a.btntwo {
          float: right;
          background: #11b57c;
          border: 1px solid #11b57c;
          color: #fff;
        }
      }
    }
  }
  //顶部登录按钮
  .cart-login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.49rem;
    background: #fff;
    line-height: 2.64rem;
    font-size: 0.7875rem;
    color: #808080;
    text-align: center;
    z-index: 100;
    border-bottom: 0.03125rem solid #ddd;
    a {
      position: relative;
      display: inline-block;
      width: 3.6rem;
      height: 1.44rem;
      margin: 0 0 0 0.84rem;
      line-height: 1.44rem;
      color: #808080;
      border-radius: 0.375rem;
      border: 1px solid #808080;
    }
  }
  .toppad {
    padding-top: 0.7rem;
    box-sizing: content-box;
  }
  // 商品列表
  .goods {
    padding: 0 0 0px;
    color: #333;
    background: #fff;
    border-bottom: solid 0.03125rem #ddd;
    .group {
      position: relative;
      .saleGroup {
        position: relative;
        margin-bottom: 0.6rem;

        .one {
          position: relative;
          padding: 0.32rem 0 0.32rem 1.22rem;
          .check {
            position: absolute;
            top: 0.64rem;
            left: 0;
            width: 2.301875rem;
            padding: 2rem 0;
            text-align: center;
            padding-left: 1rem;
          }
          .img {
            position: absolute;
            left: 2.44rem;
            top: 0.64rem;
            width: 5.09375rem;
            height: 5.09375rem;
            img {
              display: block;
              width: 5.09375rem;
              height: 5.09375rem;
            }
          }
          .text {
            padding: 0 3.8rem 0 6.25rem;
            h2 {
              height: 2.24rem;
              line-height: 1.12rem;
              font-size: 0.84rem;
              font-weight: normal;
            }
            .tag {
              height: 1.12rem;
              padding: 0.4rem 0 0.2rem;
            }
            p {
              height: 1.44rem;
              line-height: 1.44rem;
              font-size: 0.68rem;
              .red {
                color: #fb3d3d;
                b {
                  font-size: 0.84rem;
                }
              }
            }
          }
          //步进器
          .van-stepper {
            position: absolute;
            right: 0.4rem;
            top: 4.1rem;
            width: 5.6rem;
            height: 0.72rem;
          }
          //垃圾桶
          .del {
            position: absolute;
            right: 1rem;
            top: 0.42rem;
            width: 2.26375rem;
            height: 2.26375rem;
            i {
              display: block;
              width: 2.2625rem;
              height: 2.2625rem;
              background: url(//img07.yiguoimg.com/d/web/180119/01642/141511/del.png)
                center right no-repeat;
              background-size: 0.96rem 1rem;
            }
          }
        }
      }
    }
  }
}
</style>